<template>
  <div
    class="profile-card"
    :style="{
      background: `url(${backgroundImage}) no-repeat center / cover`,
      width: width,
      height: height,
    }"
  >
    <div class="avatar">
      <img :src="avatar" :alt="userName" />
    </div>

    <p class="text-md text-gray-600 font-light mt-4 mb-2 italic">
      {{ userSignature }}
    </p>

    <p class="text-xl text-gray-900 font-bold mb-2">{{ userName }}</p>
    <div class="class-display flex items-center gap-2 text-gray-700 text-lg">
      <span>当前班级：</span>
      <span class="font-medium text-green-600">{{ selectedClassName }}</span>
    </div>
    <div
      class="border border-green-100 px-4 py-4 flex gap-4 rounded-lg shadow-md mt-4"
    >
      <a-button
        class="rounded-lg shadow-sm border-gray-200 text-gray-900 transition duration-200"
        @click="openClassModal"
      >
        切换班级
      </a-button>
      <a-button
        type="primary"
        class="rounded-lg shadow-sm bg-white text-green-600 border-green-300 hover:bg-green-100 transition duration-200"
        @click="goToRollCall"
      >
        去点名
      </a-button>
    </div>

    <a-modal v-model:visible="isClassModalVisible" title="选择班级">
      <template #footer>
        <a-button
          key="back"
          class="bg-green-500 text-white"
          @click="closeClassModal"
        >
          确定
        </a-button>
      </template>
      <div class="grid grid-cols-2 gap-4 sm:grid-cols-3">
        <a-card
          v-for="classItem in classOptions"
          :key="classItem.class_no"
          :bordered="true"
          class="cursor-pointer transition duration-200 hover:shadow-lg"
          :class="{
            'bg-blue-100 border-blue-300':
              selectedClass?.class_no === classItem.class_no,
          }"
          @click="selectClass(classItem)"
        >
          <p class="text-lg text-center font-medium">
            {{ classItem.class_name }}
          </p>
          <p class="text-center text-gray-600 font-bold">
            {{ classItem.studentCount }}人
          </p>
        </a-card>
      </div>
    </a-modal>
  </div>
</template>
<script>
import { ref, computed, onMounted, watch } from "vue";
import { useClassStore } from "@/stores/class";
import { useUserStore } from "@/stores/user";
import { useRouter } from "vue-router";

export default {
  name: "ProfileCard",
  props: {
    avatar: String,
    backgroundImage: String,
    width: String,
    height: String,
  },
  setup() {
    const classStore = useClassStore();
    const userStore = useUserStore();
    const classOptions = ref([]);
    const isClassModalVisible = ref(false);

    const selectedClass = computed({
      get: () => classStore.selectedClass,
      set: (value) => classStore.selectClass(value),
    });

    const userName = computed(
      () => userStore.userInfo.username || "未登录用户"
    );
    const userSignature = computed(
      () => userStore.userInfo.signature || "初始签名"
    );

    const router = useRouter();

    const loadClassData = async () => {
      try {
        const data = await window.electronAPI.getClassData();
        if (data) {
          classOptions.value = data.classes;
        }
      } catch (error) {
        console.error("加载班级数据失败:", error);
      }
    };

    const selectedClassName = computed(() =>
      selectedClass.value
        ? selectedClass.value.class_name
        : classOptions.value[0]?.class_name
    );

    const openClassModal = () => {
      if (!selectedClass.value && classOptions.value.length > 0) {
        selectedClass.value = classOptions.value[0];
      }
      isClassModalVisible.value = true;
    };

    const closeClassModal = () => {
      isClassModalVisible.value = false;
    };

    const goToRollCall = () => {
      router.push("/roll-call");
    };

    const selectClass = (classItem) => {
      selectedClass.value = classItem;
      classStore.selectClass(classItem);
    };

    onMounted(() => {
      userStore.initializeUser();
      classStore.initializeClass();
      loadClassData();
    });
    
    return {
      classOptions,
      selectedClass,
      selectedClassName,
      isClassModalVisible,
      openClassModal,
      closeClassModal,
      selectClass,
      goToRollCall,
      userName,
      userSignature,
    };
  },
};
</script>

<style scoped lang="less">
.profile-card {
  font-family: "PingFang-SC", sans-serif;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  padding: 25px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s, box-shadow 0.3s;

  .avatar {
    img {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      border: 4px solid rgba(255, 255, 255, 0.8);
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    }
  }

  .class-display {
    margin-top: 10px;
    font-size: 18px;
    color: rgba(51, 51, 51, 0.9);
    display: flex;
    align-items: center;

    span {
      margin-right: 5px;

      &:last-child {
        font-weight: 600;
        color: #28a745;
      }
    }
  }
}
</style>
